import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; // 支持GFM语法(表格、任务列表等)
import rehypeHighlight from 'rehype-highlight'; // 代码高亮
import 'highlight.js/styles/github.css'; // 引入代码高亮样式

interface ReactMarkdownProps {
  content: string; // AI返回的Markdown内容
  className?: string; // 可选的自定义类名
}

/**
 * 用于渲染AI返回的Markdown内容的公共组件
 * 支持标准Markdown语法、GFM扩展和代码高亮
 */
const ReactMarkdownComponent: React.FC<ReactMarkdownProps> = ({ content, className = '' }) => {
  return (
    <div className={`markdown-renderer ${className}`} style={{
      width: '100%',
      boxSizing: 'border-box',
      lineHeight: '1.6',
      fontSize: '14px'
    }}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
        components={{
          // 自定义链接样式
          a: ({ node, ...props }) => (
            <a {...props} style={{ color: '#165DFF', textDecoration: 'underline' }} />
          ),
          // 自定义代码块样式
          code: ({ node, inline, className, children, ...props }) => {
            const match = /language-(\w+)/.exec(className || '');
            return (
              <code
                {...props}
                className={className}
                style={{
                  backgroundColor: inline ? '#f0f0f0' : '#282c34',
                  color: inline ? '#333' : '#fff',
                  padding: inline ? '2px 6px' : '0',
                  borderRadius: '4px',
                  fontSize: '0.9em'
                }}
              >
                {children}
              </code>
            );
          }
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
};

export default ReactMarkdownComponent;